<template>
  <div>
    <button @click="reverse">Reverse</button>
    <p ref="p">{{ msg }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    msg: 'Hello world!'
  }),
  methods: {
    reverse() {
      this.msg = this.msg.split('').reverse().join('')
      // 数据发生变化，异步更新 DOM 元素
      console.log(this.msg, this.$refs.p.innerText)
      this.$nextTick(() => {
        // DOM 元素更新完成
        console.log('nextTick', this.msg, this.$refs.p.innerText)
      })
    }
  }
}
</script>
